<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>进度条</title>
		<style>
			#progess{
				height: 30px;
				width: 100%;
				background: gray;
			}
			#bar{
				width: 1%;
				height: 30px;
				background: green;
			}
		</style>
	</head>
	<body>
		<div id="progess">
			<div id="bar"></div>
		</div>
		<br />
		<button id="btn">点击</button>
		<script>
			var btn =document.getElementById('btn');
			//按钮的点击事件
			btn.onclick=function(){
				/*计时器实现：每隔30毫秒执行一次函数
				 函数：width>100 清除计时器
				 否则div的宽度增加*/
				//定义计时器：每隔30毫秒执行myfun函数
				var timer = setInterval(myfun,30);
				//定义宽度
				var width=1;
				function myfun(){
					if(width>=100){
						clearInterval(timer);
						
					}else{
						width=width+0.3;
						bar.style.width=width+'%';
					}
				}
			}
		</script>
	</body>
</html>
